<template>
  <div class="dragdrop-file-upload">
    <a-upload-dragger
      name="file"
      :showUploadList="false"
      :beforeUpload="beforeUpload"
      :openFileDialogOnClick="false"
    >
    </a-upload-dragger>
  </div>
</template>

<script>
import { axios } from "@/utils/request";
export default {
  props: {
    treeItem: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      fileList: [],
      uploadFileSource: {},
    };
  },
  methods: {
    //拖拽上传-上传文件之前钩子
    beforeUpload(file) {
      if (file) {
        this.$message.info("文件上传中，请稍后~", 1);
        this.handleUploadFile(file);
      }
      return false;
    },
    handleUploadFile(file) {
      let formData = new FormData();
      formData.append("bucket", "yx-cloud-vue");
      formData.append("file", file);
      axios
        .post(`/document/minio/uploadfile`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          let { statusCode } = res;
          if (statusCode == 200) {
            this.uploadFileSource = res;
            let { name = "", size = 0 } = file;
            let fileSize = this.sizeTostr(size);
            let lastIdx = name.lastIndexOf(".");
            let fileType = "." + name.substring(lastIdx + 1);
            this.fileList.push({
              fileType,
              fileName: name,
              fileSize,
              dfsFileUuid: res.dfsFileUuid,
              url: res.url,
            });
            this.saveFileData();
          } else {
            this.uploadFileSource = {};
            this.$message.error(res.message ?? "文件上传失败，请稍后重试~");
          }
        })
        .catch((_) => {
          this.uploadFileSource = {};
          this.$message.error(_.message ?? "文件上传失败，请稍后重试~");
        })
        .finally((_) => {});
    },
    saveFileData() {
      let { uploadFileSource, treeItem, fileList } = this;
      const files = fileList.map(
        ({ $$DataType, file, loading, ...keepAttrs }) => keepAttrs
      );
      let formJson = {
        //目录id
        treeUuid: treeItem.uuid,
        //文件名称
        name: uploadFileSource.object,
        //文件
        fileAddress: JSON.stringify(files),
      };
      axios
        .post(`/probusiness/projectInitiationFile/save`, formJson, {
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
        })
        .then((res) => {
          if (res.statusCode === 200 || res === 1) {
            this.$message.success("上传成功", 1.5);
            this.$emit("onRefresh");
          } else {
            this.$message.error(res?.message ?? "上传失败");
          }
        })
        .catch((_) => {})
        .finally((_) => {});
    },

    //文件大小转换
    sizeTostr(size = 0) {
      size = Number(size);
      var data = "";
      if (size < 0.1 * 1024) {
        //如果小于0.1KB转化成B
        data = size.toFixed(2) + "B";
      } else if (size < 0.1 * 1024 * 1024) {
        //如果小于0.1MB转化成KB
        data = (size / 1024).toFixed(2) + "KB";
      } else if (size < 0.1 * 1024 * 1024 * 1024) {
        //如果小于0.1GB转化成MB
        data = (size / (1024 * 1024)).toFixed(2) + "MB";
      } else {
        //其他转化成GB
        data = (size / (1024 * 1024 * 1024)).toFixed(2) + "GB";
      }
      var sizestr = data + "";
      var len = sizestr.indexOf("\.");
      var dec = sizestr.substr(len + 1, 2);
      if (dec == "00") {
        //当小数点后为00时 去掉小数部分
        return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
      }
      return sizestr;
    },
  },
};
</script>

<style lang="less" scoped>
.dragdrop-file-upload {
  height: 100%;
  width: 100%;
  /deep/.ant-upload-drag {
    background: unset;
    border: 0;
    .ant-upload-btn {
      padding: 0;
    }
  }
}
</style>
